/**
 * Reglas para estructura principal en pantalla de 320px a 480px
 * (screen: 320px -> 480px)
 *
 * @author Hector <henry@aquainteractive.com.mx>
 * @copyright Copyright (c) 2012, {@link http://www.aquainteractive.com Aqua
 * Interactive}
 * @package
 * @since Revisión $id$ $date$
 * @subpackage css
 * @version $Id$
 */
html {
    -webkit-overflow-scrolling: touch;
}

header {
}

nav {
}

body {
}

section {
    header {
        h2 {
            padding-top: 0px;
            text-transform: uppercase;
            font-family: Arial, san-serif;
        }
    }
}

article {
    .fn {
        font-size: 22px;
        margin-right: 20px;
    }

    a {
        font-size: 14px;
        color: #75BE41 ! important;
    }
}

aside {
}

footer {
    background: url('../img/bg_gray_black.gif') repeat;
    margin-top: 20px;
}

.container {
    text-align: center;
    width: 60em;
    margin: 0 auto;
    padding: 2em 0;
}

.cabecera {
    background: url('../img/bg_shadow.png') bottom center no-repeat;
    height: 180px;
    h1 {
        margin-top: 20px;
        padding: 0px;
        display: inline-block;
        height: 127px;
    }
}

#wrapper {
    text-align: left;
}

.footer {
    background: url("../img/fondo_pie.png") repeat scroll 0 0 #CCCCCC;
    color: #FFFFFF;
    width: 100%;
    .footerCenter {
        height: 8.5em;
        margin: 0 auto;
        width: 60em;
        p {
            text-align: center;
            a {
                color: #FFFFFF;
                text-decoration: none;
                span {
                    position: relative;
                    top: -15px;
                }
            }
        }

        ul {
            margin: 2em auto;
            width: 15.5em;
            li {
                border-right: 1px solid #FFFFFF;
                float: left;
                a {
                    color: #FFFFFF;
                    margin: 0 1em;
                }
            }

            li.noBorder {
                border: medium none ! important;
            }
        }
    }
}

header#head {
    display: block;
    margin: 0 auto;
    width: 60em;
    .logoNort {
        display: block;
        margin: 0 auto;
    }

    .pull-right {
        float: right;
        .enlacesTop {
            padding-right: 1em;
            text-align: right;
            a {
                color: #000000;
                text-decoration: none;
            }
        }
    }
}

header.principal {
    height: 11em;
}

header.interno {
    height: 7em;
    a.logoNort {
        width: 10.5em;
    }

    div.enlacesTop {
        margin-top: -4em;
    }
}

.sombra-header {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../img/bg-header-sombra.png");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 1em;
    width: 100%;
}

.dashboard-nav-sombra-superior {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../img/bg-header-sombra-up.png");
    background-origin: padding-box;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 1em;
    width: 100%;
}

.dashboard-nav-sombra-inferior {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../img/bg-header-sombra.png");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 1em;
    width: 100%;
}

#admin-nav {
    height: 2em;
    li {
        width: 10em;
        text-align: center;
        list-style: none;
        float: left;
        margin-top: 0.5em;
    }

    li.active {
        a {
            text-decoration: none;
        }
    }
}

.suscriptionDetails {
    width: 19em;
    float: left;
    h4 {
        font-size: 1.5em;
        text-decoration: underline;
    }
}

.instaledApp {
    margin-left: 1em;
    .fecha-lanzamiento {
        text-align: center;
        padding-right: 4em;
    }
}

.dashboard {
    h2 {
        text-transform: none;
        color: #0A0;
    }

    #currentBill {
        background-color: #DDD;
        width: 45%;
        float: left;
        padding: 1em;
        border-radius: 0.5em;
        p.date {
            text-transform: uppercase;
            padding-bottom: 0px;
        }
    }

    #currentBillInfo {
        width: 45%;
        float: right;
        padding: 1em;
        p.titulo {
            text-transform: uppercase;
            padding-bottom: 0px;
        }
    }

    #oldBills {
        clear: both;
        h3 {
            text-transform: uppercase;
        }

        table {
            width: 100%;
            thead {
                tr {
                    background-color: #DDD;
                    border-radius: 0.5em;
                    th {
                        padding: 0.5em;
                    }

                    th.first {
                        border-top-left-radius: 0.5em;
                        border-bottom-left-radius: 0.5em;
                    }

                    th.last {
                        border-top-right-radius: 0.5em;
                        border-bottom-right-radius: 0.5em;
                    }
                }
            }

            tbody {
                tr {
                    border-bottom: 1px solid #DDD;
                    td {
                        padding: 0.5em;
                    }

                    th {
                        padding: 0.5em;
                    }
                }
            }
        }
    }

    #billConcepts {
        background-color: #DDD;
        border-radius: 0.5em;
        text-align: center;
        table {
            width: 95%;
            margin: 1em;
            caption {
                border-top: 1px solid #000;
            }

            td.money {
                text-align: right;
            }

            thead {
                tr {
                    border-bottom: 1px solid #000;
                    border-top: 1px solid #000;
                    th {
                        padding: 0.5em;
                    }
                }
            }

            tfoot {
                text-align: left;
                margin-top: 0.5em;
                tr {
                    td {
                        border-bottom: 1px solid #EEE;
                        padding: 0.5em;
                    }

                    th {
                        border-bottom: 1px solid #EEE;
                        padding: 0.5em;
                    }
                }

                tr.total {
                    td {
                        border-bottom: 0px none #EEE;
                        border-top: 1px solid #000;
                    }

                    th {
                        border-bottom: 0px none #EEE;
                        border-top: 1px solid #000;
                    }
                }
            }

            tbody {
                tr {
                    border-bottom: 1px solid #EEE;
                    td {
                        padding: 0.5em;
                    }

                    th {
                        padding: 0.5em;
                        text-align: left;
                        font-weight: normal;
                    }
                }
            }

            .noborder {
                border: 0px none #EEE;
                td {
                    border: 0px none #EEE;
                }

                th {
                    border: 0px none #EEE;
                }
            }
        }

        dl {
            width: 30%;
            float: right;
            margin: 1em;
            dt {
                text-transform: uppercase;
                font-weight: bolder;
                text-align: left;
            }

            dd {
                text-align: left;
            }
        }

        dl.info {
            float: none;
            width: 100%;
        }
    }

    .payments {
        li {
            float: left;
            width: 20em;
            a {
                text-decoration: line-through;
            }
        }
    }

    form {
        clear: both;
        float: none;
        margin: 0 auto;
        width: 620px;
        h2 {
            b {
                text-transform: uppercase;
                font-size: 1.5em;
            }
        }

        fieldset {
            width: 290px;
            float: left;
            margin-right: 2em;
            label , input[type="text"] , input[type="password"] {
                .roundedCorners;
                clear: left;
                float: left;
                text-align: left;
                width: 95%;
            }

            input[type="text"] , input[type="password"] {
                display: block;
                margin-bottom: .5em;
            }
        }

        fieldset.noMargin {
            margin-right: 0em;
        }

        button {
            .removeAppearance;
            .buttonStyle;
            display: block;
            font-size: 1em;
            line-height: 1em;
            margin: 1em 0 0 0;
            padding: .5em;
            width: 290px;
            float: right;
        }
    }
}

p.campoDesc {
    color: #808080;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 0;
}

